<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>用户列表</h2>
<h3><a th:href="@{/user}">添加用户</a></h3>
<table border="1">
    <tr>
        <th> 用户id</th>
        <th>用户名</th>
        <th>密码</th>
        <th>操作</th>
    </tr>
    <tr th:each="user:${userList}">
        <td th:text="${user.uid}"></td>
        <td th:text="${user.uname}"></td>
        <td th:text="${user.upwd}"></td>
        <td>
            <a th:href="@{/user/}+${user.uid}">修改</a>
            <a href="javascript:void(0);" th:attr="delete_url=@{/user/}+${user.uid}" class="delete">删除</a>
        </td>
    </tr>
</table>
<form method="post" id="deleteUserFrom">
    <input type="hidden" name="_method" value="delete">
</form>
<!--通过pom引入jar-->
<script type="text/javascript" th:src="@{/webjars/jquery/3.5.1/jquery.js}"></script>
<script>
    <!--为所有的删除操作，添加单击事件-->
    $(".delete").click(function () {
        //获取到超链接的请求的href的路径
        var href = $(this).attr("delete_url");
        //把form的action属性设置成href
        $("#deleteUserFrom").attr("action", href);
        //提交表单
        $("#deleteUserFrom").submit();
        //阻止原来的单机事件
        return false;
    })
</script>
</body>
</html>